<template>
  <div class="center_top">
    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
  </div>
</template>

<script>

import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {}
    };
  },
  props: {},
  watch: {
    "$store.state.setting.lastSEIASComputed.resultCII": {
      deep: true,
      handler(newValue, oldValue) {
        this.getData(newValue);
      }
    }
  },
  mounted() {
    this.getData(this.$store.state.setting.lastSEIASComputed.resultCII);
  },
  methods: {
    getData(newValue) {
      let res = newValue;
      res.category = this.$store.state.setting.lastSEIASData.selectOptions.deliveryYear;
      this.init(res);
    },
    init(newData) {
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          },
          formatter: function(params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function(item) {
              result +=
                item.marker +
                " " +
                item.seriesName +
                " : " +
                Number(item.value).toFixed(2)  +
                "</br>";
            });
            return result;
          }
        },
        legend: {
          data: [
            "Attained CII",
            "Required CII",
            "rank A",
            "rank B",
            "rank C",
            "rank D"
          ],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0"
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "30px",
          top: "20px"
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },

            axisLabel: {
              formatter: "{value}"
            }
          }
          // {
          //   splitLine: { show: false },
          //   axisLine: {
          //     lineStyle: {
          //       color: "#B4B4B4"
          //     }
          //   },
          //   axisLabel: {
          //     formatter: "{value}% "
          //   }
          // }
        ],
        series: [
          {
            name: "Attained CII",
            type: "line",
            //smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#956FD4" },
                { offset: 1, color: "#3EACE5" }
              ])
            },
            data: newData.attCII
          },
          {
            name: "Required CII",
            type: "line",
            //smooth: true,
            symbol: "none", //去除点
            // showAllSymbol: true,
            // symbol: "emptyCircle",
            symbolSize: 8,
            // yAxisIndex: 1,
            itemStyle: {
              color: "#F02FC2"
            },
            data: newData.reqCII
          },
          {
            name: "rank A",
            data: newData.rankA,
            type: "line",
            //smooth: true,
            symbol: "none", //去除点
            color: "rgba(9,202,243,.7)",
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(9,202,243,.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(9,202,243,.0)"
                  }
                ],
                false
              )
            }
          },
          {
            name: "rank B",
            data: newData.rankB,
            type: "line",
            //smooth: true,
            symbol: "none", //去除点
            color: "rgba(159,195,136,.7)",
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(159,195,136,.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(159,195,136,.0)"
                  }
                ],
                false
              )
            }
          },
          {
            name: "rank C",
            data: newData.rankC,
            type: "line",
            //smooth: true,
            symbol: "none", //去除点
            color: "rgba(255,219,92,.7)",
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(255,219,92,.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(255,219,92,.0)"
                  }
                ],
                false
              )
            }
          },
          {
            name: "rank D",
            data: newData.rankD,
            type: "line",
            //smooth: true,
            symbol: "none", //去除点
            color: "rgba(248,121,149,.7)",
            areaStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(248,121,149,.7)"
                  },
                  {
                    offset: 1,
                    color: "rgba(248,121,149,.0)"
                  }
                ],
                false
              )
            }
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.center_top {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
